<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body,
		html {
			padding: 0;
			margin: 0;
			background: #0A0F23;
			width: 100%;
			height: 100%;
		}

	</style>
</head>

<body>
	<div id="vbarChart" style="width:100%;height:100%;"></div>
	<script src="../../components/echarts-4.0.4.min.js"></script>
	<script>
		var vbarChart = echarts.init(document.getElementById('vbarChart'));


		var data = ['西安交通大学', '西安电子科技大学', '西北工业大学', '陕西科技大学', '长安大学', '西安理工大学', '陕西师范大学', '西安建筑科技大学', '中国人民解放军第四军医大学', '西安科技大学'];
		var data1 = ['3760', '3458', '1860', '1832', '864', '730', '633', '596', '496', '462'];
		//			var data2 = ['76','118','157','164','167','144','126'];
		for (var i = 0; i < data.length; i++) {
			if (data[i] == '2017') {
				data[i] = {
					value: '2017',
					textStyle: {
						color: '#FEDC6E'
					}
				}
			}
		}
		barOption = {
			title: {
				text: '2017年全省高校发明专利拥有量前10名',
				left: 'center',
				top: '0%',
				textStyle: {
					color: '#fff',
					fontSize: 22
				}
			},
			grid: {
				right: '13%',
				left: '15%',
				top: '25%',
				bottom: '15%'

			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				}
			},
			xAxis: {
				triggerEvent: true,
				data: data,
				axisLabel: {
					interval: 0,
					rotate: -30,
					show: true,
					formatter: function(value) {
						if (value.length > 4) {
							return value.substring(0, 4) + "...";
						} else {
							return value;
						}
					},
					textStyle: {
						color: "#fff",
						fontSize: 16
					}
				},
				axisLine: {
					lineStyle: {
						show: true,
						color: "#ffffff",
						width: 1
					}
				}
			},
			yAxis: [{
				type: 'value',
				min: 0,
				max: 3800,
				name: '数量',
				interval: 300,
				nameTextStyle: {
					"color": "#fff",
                    fontSize:16
				},
				axisLabel: {
					interval: 0,
					show: true,
					textStyle: {
						color: "#fff",
						fontSize: 16
					}
				},
				axisLine: {
					lineStyle: {
						color: "#F3F3F3",
						width: 1
					}
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,02)",
						width: 1
					},
					show: false
				}
			}],
			series: [{
				name: '数量',
				type: 'bar',
				silent: true,
				barWidth: "40%",
				itemStyle: {
					normal: {
						color: '#1FBCD2'
					}
				},
				data: data1
			}]
		};


		vbarChart.setOption(barOption);

	</script>

</html>
